<template>
    <view class="org-chart">
        <uni-org-chart :data="orgData" :config="orgConfig"></uni-org-chart>
    </view>
</template>
  
<script>
export default {
    data() {
        return {
            orgData: [
                {
                    name: 'CEO',
                    title: 'Chief Executive Officer',
                    children: [
                        {
                            name: 'VP of Sales',
                            title: 'Vice President of Sales',
                            children: [
                                {
                                    name: 'Sales Manager',
                                    title: 'Sales Manager',
                                },
                                {
                                    name: 'Sales Representative',
                                    title: 'Sales Representative',
                                },
                            ],
                        },
                        {
                            name: 'VP of Marketing',
                            title: 'Vice President of Marketing',
                            children: [
                                {
                                    name: 'Marketing Manager',
                                    title: 'Marketing Manager',
                                },
                                {
                                    name: 'Marketing Representative',
                                    title: 'Marketing Representative',
                                },
                            ],
                        },
                    ],
                },
            ],
            orgConfig: {
                nodeWidth: 160,
                nodeHeight: 70,
                direction: 'vertical',
            },
        };
    },
};
</script>
  
<style>
.org-chart {
    width: 100%;
    height: 100%;
}
</style>
  